HTML/CSS下拉導航菜單

如何解決下拉菜單顯示不正確以及材料圖標不合適的問題？導航欄的高度必須是60px，所以我嘗試通過顯示內嵌塊但它不工作...幫助！HTML/CSS下拉導航菜單

body {} #nav-main { 
 
    width: 1280px; 
 
    min-width: 100%; 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    background-color: rgba(0, 0, 0, 0.39); 
 
    height: 60px; 
 
} 
 
li { 
 
    float: left; 
 
    height: 60px; 
 
} 
 
li a, 
 
li div { 
 
    display: block; 
 
    color: #ffffff; 
 
    text-align: center; 
 
    padding: 19px 25px; 
 
    text-decoration: none; 
 
} 
 
.search-form { 
 
    width: 550px; 
 
    box-sizing: border-box; 
 
    padding: 15px 65px; 
 
} 
 
input[type="search"] { 
 
    width: 100%; 
 
    background: url(../images/search-icon.png) no-repeat #fcfcfc; 
 
    border: 1px solid #d1d1d1; 
 
    background-size: contain; 
 
    padding: 3px 15px 3px 30px; 
 
    line-height: 22px; 
 
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); 
 
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; 
 
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; 
 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; 
 
    -webkit-transition: all 0.7s ease 0s; 
 
    -moz-transition: all 0.7s ease 0s; 
 
    -o-transition: all 0.7s ease 0s; 
 
    transition: all 0.7s ease 0s; 
 
} 
 
input[type="search"]:focus { 
 
    width: 300px; 
 
} 
 
i.material-icons { 
 
    font-size: 26px; 
 
} 
 
li a:hover { 
 
    background-color: rgba(0, 0, 0, 0.50); 
 
} 
 
.dropdown { 
 
    position: relative; 
 
    color: #fff; 
 
} 
 
.dropdown ul { 
 
    z-index: 9; 
 
    top: 101%; 
 
    position: absolute; 
 
    display: none; 
 
} 
 
.dropdown:hover ul { 
 
    display: block; 
 
} 
 
.dropdown ul li { 
 
    margin: 0; 
 
    display: block; 
 
}

<ul id="nav-main"> 
 
    <li> 
 
    <a href="#">Home</a> 
 
    </li> 
 
    <li> 
 
    <a href="/about">About</a> 
 
    </li> 
 
    <li> 
 
    <a href="/faq">FAQ</a> 
 
    </li> 
 
    <li> 
 
    <a href="/Contact">Contact</a> 
 
    </li> 
 
    <li> 
 
    <form action="action_page.php" class="search-form"> 
 
     <input type="search" name="savanasearch" placeholder="Search..." class="nav-item5"> 
 
    </form> 
 
    </li> 
 
    <li> 
 
    <div class="dropdown"> 
 
     <a href="#"><i class="material-icons">account_circle</i></a> 
 
     <ul> 
 
     <li> 
 
      <a href="#">Login</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">Register</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </li> 
 
    <li> 
 
    <div class="dropdown"> 
 
     <a href="#" class="nav-item"><i class="material-icons">favorite_border</i></a> 
 
     <ul> 
 
     <li> 
 
      <a href="#">Favorites</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">Wishlist</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">Track Order</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </li> 
 
</ul>

來源

2016-05-22 J. Koh

只看到了這個問題，今天不知道你是否曾經得到它排序。

這裏是我的兩便士

body {} 
 
#nav-main { 
 
    width: 100%; 
 
    min-width: 100%; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    background-color: rgba(0, 0, 0, 0.39); 
 
    height: 60px; 
 
} 
 
li { 
 
    float: left; 
 
    height: 60px; 
 
} 
 
li a{display: block; 
 
    color: #ffffff; 
 
    text-align: center; 
 
    padding: 19px 25px; 
 
    text-decoration: none;} 
 
li div { 
 
    display:block!important; 
 
    color: #ffffff; 
 
    text-align: center; 
 
    padding: 10px 10px; 
 
    text-decoration: none; 
 
} 
 
.search-form { 
 
    width: 550px; 
 
    box-sizing: border-box; 
 
    padding: 15px 50px; 
 
} 
 
input[type="search"] { 
 
    width: 80%; 
 
    background: url(../images/search-icon.png) no-repeat #fcfcfc; 
 
    border: 1px solid #d1d1d1; 
 
    background-size: contain; 
 
    padding: 3px 15px 3px 30px; 
 
    line-height: 22px; 
 
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); 
 
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; 
 
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; 
 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; 
 
    -webkit-transition: all 0.7s ease 0s; 
 
    -moz-transition: all 0.7s ease 0s; 
 
    -o-transition: all 0.7s ease 0s; 
 
    transition: all 0.7s ease 0s; 
 
} 
 
input[type="search"]:focus { 
 
    width: 300px; 
 
} 
 
i.material-icons { 
 
    font-size: 26px; 
 
} 
 
li a:hover { 
 
    background-color: rgba(0, 0, 0, 0.50); 
 
} 
 
.dropdown { 
 
    position: relative; 
 
    margin-top: -10px; 
 
    margin-left:-50px; 
 
    padding-left:15px; 
 
    color: #fff; 
 
} 
 
.dropdown ul { 
 
    position: relative; 
 
    display: none; 
 
} 
 
.dropdown:hover ul { 
 
    display: block!important; 
 
} 
 
.dropdown ul li { 
 
    display: block!important; 
 
    background-color: rgba(0, 0, 0, 0.39); 
 
    float:none!important; 
 
}

<body> 
 
<ul id="nav-main"> 
 
    <li> 
 
    <a href="#">Home</a> 
 
    </li> 
 
    <li> 
 
    <a href="/about">About</a> 
 
    </li> 
 
    <li> 
 
    <a href="/faq">FAQ</a> 
 
    </li> 
 
    <li> 
 
    <a href="/Contact">Contact</a> 
 
    </li> 
 
    <li> 
 
    <form action="action_page.php" class="search-form"> 
 
     <input type="search" name="savanasearch" placeholder="Search..." class="nav-item5"> 
 
    </form> 
 
    </li> 
 
    <li> 
 
    <div class="dropdown"> 
 
     <a href="#"><i class="material-icons">account_circle</i></a> 
 
     <ul> 
 
     <li> 
 
      <a href="#">Login</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">Register</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </li> 
 
    <li> 
 
    <div class="dropdown"> 
 
     <a href="#" class="nav-item"><i class="material-icons">favorite_border</i></a> 
 
     <ul> 
 
     <li> 
 
      <a href="#">Favorites</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">Wishlist</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">Track Order</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </li> 
 
</ul> 
 
</body>

噓..看看它全屏！

來源

2016-05-25 16:49:54

HTML/CSS下拉導航菜單

回答

相關問題