0
大家好,我是一個HTML5和CSS的新手初學者。嘗試創建經典設備圖標形式的dropdown
菜單,但它不會工作。也許有人可以回答我這個問題。css下拉菜單不會打開onn hoover
我通過顯示非隱藏它,並表示它顯示塊懸停。「 也許這可能是一些問題,我不知道切片。
<header class="Header">
<!-- Head navigation-->
<div>
<a href="#" title="cart"> <img src="images/cart_logo_webb_design.svg" alt="cart"></a>
<a href="#" title="Search"> <img src="images/search_logo_webb_design.svg" alt="search glass"></a>
</div>
<div>
<img src="images/k_logo_webb_design.svg" alt="CompanyLogo">
</div>
<nav id="MainNavigation">
<a href="#" title="MenuIcon"><img src="images/menu_logo_webb_design.svg" alt="Menu icon"></a>
<ul id="dropDownMenu">
<li>
<a class="Sub_Menu_Link" href="#" title="Woman">Woman</a>
<ul>
<li><a href="#">1</a> </li>
<li><a href="#">2</a> </li>
<li><a href="#">3</a> </li>
<li><a href="#">4</a> </li>
<li><a href="#">5</a> </li>
</ul>
</li>
<li>
<a class="Sub_Menu_Link" href="#" title="Man">Man</a>
<ul>
<li><a href="#">1</a> </li>
<li><a href="#">2</a> </li>
<li><a href="#">3</a> </li>
<li><a href="#">4</a> </li>
<li><a href="#">5</a> </li>
</ul>
</li>
<li><a href="#" title="Sale">Sale</a></li>
</ul>
</nav>
and my css here
/*GeneralHeader*/
header{
position:relative;
display:block;
top:15px;
z-index: 1;
}
.Header img{
width:36px;
height:40px;
}
header div:first-of-type{
float:right;
background-color:red;
margin-right:0;
width:30%;
position:absolute;
top:0;
right:0;
}
header div:last-of-type{
position:relative;
left:50%;
}
header div:after{
content:"";
visibility:hidden;
display:block;
clear:both;
}
nav{
float:left;
width:20%;
position:absolute;
left:0;
top:0;
background-color:red;
}
nav:after{
content:"";
visibility:hidden;
display:block;
clear:both;
}
nav ul{
margin:5%;
padding:0;
}
nav ul li:hover{
background-color:white;
}
nav ul >ul:hover{
display:block;
}
nav ul li a{
display:inline-block;
color:black;
padding: 5px 3px;
width:125px;
text-decoration:none;
position:relative;
}
nav ul li a:visited{
color:rgba(70,80,0,.65);
}
nav ul li a:hover{
color:green;
}
nav ul ul{
position:absolute;
display:none;
}
nav ul ul li{ /* */
position:relative;
}
nav ul ul ul{ /* denna innbär att de 3e underlänkarna ``positineras till vänster om sna föräldrar.. ej nödvändigt för mig hehe */
left:100%;
top:0;
}
您沒有使用任何你''nav'或classes''ids'在你的'css'此代碼段,如果對你有用? –
不,我沒有..只是把它們放在開始的時候,我正在分區,如果我永遠需要它 – Patrik
你的HTML寫得很差。 – Slime