我該如何讓下拉菜單標題看起來更加獨特

Question

我可以知道我該如何縮小下拉標題之間的差距？我嘗試加入border:1px solid black;，但它很醜。我希望使它像home | about | portfolio | blog | contact而不是home about portfolio blog contact。

body { 
 
    font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif; 
 
    padding: 20px 50px 150px; 
 
    font-size: 13px; 
 
    text-align: center; 
 
    background: #E3CAA1; 
 
} 
 

 
ul { 
 
    text-align: left; 
 
    display: inline; 
 
    margin: 0; 
 
    padding: 15px 4px 17px 0; 
 
    list-style: none; 
 
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); 
 
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); 
 
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); 
 
} 
 
ul li { 
 
    font: bold 12px/18px sans-serif; 
 
    display: inline-block; 
 
    margin-right: -4px; 
 
    position: relative; 
 
    padding: 15px 20px; 
 
    background: #fff; 
 
    color:#2A0851; 
 
    cursor: pointer; 
 
    -webkit-transition: all 0.2s; 
 
    -moz-transition: all 0.2s; 
 
    -ms-transition: all 0.2s; 
 
    -o-transition: all 0.2s; 
 
    transition: all 0.2s; 
 
    background: -webkit-linear-gradient(white, grey); /* For Safari 5.1 to 6.0 */ 
 
    background: -o-linear-gradient(white, grey); /* For Opera 11.1 to 12.0 */ 
 
    background: -moz-linear-gradient(white, grey); /* For Firefox 3.6 to 15 */ 
 
    background: linear-gradient(white, grey); /* Standard syntax (must be last) */ 
 
} 
 
ul li:hover { 
 
    background: #555; 
 
    color: #fff; 
 
} 
 
ul li ul { 
 
    padding: 0; 
 
    position: absolute; 
 
    top: 48px; 
 
    left: 0; 
 
    width: 150px; 
 
    -webkit-box-shadow: none; 
 
    -moz-box-shadow: none; 
 
    box-shadow: none; 
 
    display: none; 
 
    opacity: 0; 
 
    visibility: hidden; 
 
    -webkit-transiton: opacity 0.2s; 
 
    -moz-transition: opacity 0.2s; 
 
    -ms-transition: opacity 0.2s; 
 
    -o-transition: opacity 0.2s; 
 
    -transition: opacity 0.2s; 
 
} 
 
ul li ul li { 
 
    background: #555; 
 
    display: block; 
 
    color: #fff; 
 
    text-shadow: 0 -1px 0 #000; 
 
} 
 
ul li ul li:hover { background: #666; } 
 
ul li:hover ul { 
 
    display: block; 
 
    opacity: 1; 
 
    visibility: visible; 
 
}

<div> 
 
<ul><li>Home</li> 
 
    <li>About</li> 
 
    <li> 
 
    Portfolio 
 
    <ul> 
 
     <li>Web Design</li> 
 
     <li>Web Development</li> 
 
     <li>Illustrations</li> 
 
    </ul> 
 
    </li> 
 
    <li>Blog</li> 
 
    <li>Contact</li> 
 
</ul> 
 
</div>

Answer 1

你可以用這個試試下面的CSS，您可以添加邊框 - 左轉主<li>和border-botto米到它的孩子的檢查下面更新的CSS可能會幫助你。

body { 
 
    font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif; 
 
    padding: 20px 50px 150px; 
 
    font-size: 13px; 
 
    text-align: center; 
 
    background: #E3CAA1; 
 
} 
 

 
ul { 
 
    text-align: left; 
 
    display: inline; 
 
    margin: 0; 
 
    padding: 15px 4px 17px 0; 
 
    list-style: none; 
 
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); 
 
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); 
 
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); 
 
} 
 
ul li { 
 
    font: bold 12px/18px sans-serif; 
 
    display: inline-block; 
 
    margin-right: -4px; 
 
    position: relative; 
 
    padding: 15px 20px; 
 
    background: #fff; 
 
    color:#2A0851; 
 
    cursor: pointer; 
 
    -webkit-transition: all 0.2s; 
 
    -moz-transition: all 0.2s; 
 
    -ms-transition: all 0.2s; 
 
    -o-transition: all 0.2s; 
 
    transition: all 0.2s; 
 
    background: -webkit-linear-gradient(white, grey); /* For Safari 5.1 to 6.0 */ 
 
    background: -o-linear-gradient(white, grey); /* For Opera 11.1 to 12.0 */ 
 
    background: -moz-linear-gradient(white, grey); /* For Firefox 3.6 to 15 */ 
 
    background: linear-gradient(white, grey); /* Standard syntax (must be last) */ 
 
} 
 
ul li:hover { 
 
    background: #555; 
 
    color: #fff; 
 
} 
 
ul li ul { 
 
    padding: 0; 
 
    position: absolute; 
 
    top: 48px; 
 
    left: 0; 
 
    width: 150px; 
 
    -webkit-box-shadow: none; 
 
    -moz-box-shadow: none; 
 
    box-shadow: none; 
 
    display: none; 
 
    opacity: 0; 
 
    visibility: hidden; 
 
    -webkit-transition: opacity 0.2s; 
 
    -moz-transition: opacity 0.2s; 
 
    -ms-transition: opacity 0.2s; 
 
    -o-transition: opacity 0.2s; 
 
    -transition: opacity 0.2s; 
 
} 
 
ul li ul li { 
 
    background: #555; 
 
    display: block; 
 
    color: #fff; 
 
    text-shadow: 0 -1px 0 #000; 
 
} 
 
ul li ul li:hover { background: #666; } 
 
ul li:hover ul { 
 
    display: block; 
 
    opacity: 1; 
 
    visibility: visible; 
 
} 
 
div>ul>li{ 
 
    border-left : 1px solid grey; 
 
    } 
 

 
div>ul>li:first-child { 
 
    border-left: none; 
 
} 
 

 
div ul li ul li{ 
 
    border-bottom : 1px solid white; 
 
}

<div> 
 
<ul> 
 
    <li>Home</li> 
 
    <li>About</li> 
 
    <li> 
 
    Portfolio 
 
    <ul> 
 
     <li>Web Design</li> 
 
     <li>Web Development</li> 
 
     <li>Illustrations</li> 
 
    </ul> 
 
    </li> 
 
    <li>Blog</li> 
 
    <li>Contact</li> 
 
</ul> 
 
</div>

Answer 2

您可以通過freestock.tk

body { 
 
    font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif; 
 
    padding: 20px 50px 150px; 
 
    font-size: 13px; 
 
    text-align: center; 
 
    background: #E3CAA1; 
 
} 
 

 
ul { 
 
    text-align: left; 
 
    display: inline; 
 
    margin: 0; 
 
    padding: 15px 4px 17px 0; 
 
    list-style: none; 
 
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); 
 
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); 
 
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); 
 
} 
 
ul li { 
 
    font: bold 12px/18px sans-serif; 
 
    display: inline-block; 
 
    margin-right: -4px; 
 
    position: relative; 
 
    padding: 15px 20px; 
 
    background: #fff; 
 
    color:#2A0851; 
 
    cursor: pointer; 
 
    -webkit-transition: all 0.2s; 
 
    -moz-transition: all 0.2s; 
 
    -ms-transition: all 0.2s; 
 
    -o-transition: all 0.2s; 
 
    transition: all 0.2s; 
 
    background: -webkit-linear-gradient(white, grey); /* For Safari 5.1 to 6.0 */ 
 
    background: -o-linear-gradient(white, grey); /* For Opera 11.1 to 12.0 */ 
 
    background: -moz-linear-gradient(white, grey); /* For Firefox 3.6 to 15 */ 
 
    background: linear-gradient(white, grey); /* Standard syntax (must be last) */ 
 
} 
 
ul li:hover { 
 
    background: #555; 
 
    color: #fff; 
 
} 
 
ul li ul { 
 
    padding: 0; 
 
    position: absolute; 
 
    top: 48px; 
 
    left: 0; 
 
    width: 150px; 
 
    -webkit-box-shadow: none; 
 
    -moz-box-shadow: none; 
 
    box-shadow: none; 
 
    display: none; 
 
    opacity: 0; 
 
    visibility: hidden; 
 
    -webkit-transiton: opacity 0.2s; 
 
    -moz-transition: opacity 0.2s; 
 
    -ms-transition: opacity 0.2s; 
 
    -o-transition: opacity 0.2s; 
 
    -transition: opacity 0.2s; 
 
} 
 
ul li ul li { 
 
    background: #555; 
 
    display: block; 
 
    color: #fff; 
 
    text-shadow: 0 -1px 0 #000; 
 
} 
 
ul li ul li:hover { background: #666; } 
 
ul li:hover ul { 
 
    display: block; 
 
    opacity: 1; 
 
    visibility: visible; 
 
} 
 
.bottom-separator{ 
 
    border-bottom:solid 1px white; 
 
    -webkit-transiton: opacity 0.2s; 
 
} 
 
.title-separator-1{ 
 
    border-right:solid 1px #555; 
 
} 
 
.title-separator-2{ 
 
    border-right:solid 1.5px #555; 
 
}

<div> 
 
<ul><li class="title-separator-1">Home</li> 
 
    <li class="title-separator-2">About</li> 
 
    <li class="title-separator-2"> 
 
    Portfolio 
 
    <ul> 
 
     <li class="bottom-separator">Web Design</li> 
 
     <li class="bottom-separator">Web Development</li> 
 
     <li class="bottom-separator">Illustrations</li> 
 
    </ul> 
 
    </li> 
 
    <li class="title-separator-1">Blog</li> 
 
    <li>Contact</li> 
 
</ul> 
 
</div>

Answer 3

使用白色底邊框和-webkit-transiton: opacity 0.2s;在批示正確建議如果你想要一些分隔符，你可以在左邊或右邊放置邊框並消除邊框最後一個/第一個分別使用first-child或last-child僞選擇器。

body { 
 
    font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif; 
 
    padding: 20px 50px 150px; 
 
    font-size: 13px; 
 
    text-align: center; 
 
    background: #E3CAA1; 
 
} 
 
ul { 
 
    text-align: left; 
 
    display: inline; 
 
    margin: 0; 
 
    padding: 15px 4px 17px 0; 
 
    list-style: none; 
 
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); 
 
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); 
 
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); 
 
} 
 
ul li { 
 
    font: bold 12px/18px sans-serif; 
 
    display: inline-block; 
 
    margin-right: -4px; 
 
    position: relative; 
 
    padding: 15px 20px; 
 
    background: #fff; 
 
    color: #2A0851; 
 
    cursor: pointer; 
 
    -webkit-transition: all 0.2s; 
 
    -moz-transition: all 0.2s; 
 
    -ms-transition: all 0.2s; 
 
    -o-transition: all 0.2s; 
 
    transition: all 0.2s; 
 
    background: -webkit-linear-gradient(white, grey); 
 
    /* For Safari 5.1 to 6.0 */ 
 
    background: -o-linear-gradient(white, grey); 
 
    /* For Opera 11.1 to 12.0 */ 
 
    background: -moz-linear-gradient(white, grey); 
 
    /* For Firefox 3.6 to 15 */ 
 
    background: linear-gradient(white, grey); 
 
    /* Standard syntax (must be last) */ 
 
    border-left: 1px solid #999; 
 
} 
 
ul li:first-child { 
 
    border-left: none; 
 
} 
 
ul li:hover { 
 
    background: #555; 
 
    color: #fff; 
 
} 
 
ul li ul { 
 
    padding: 0; 
 
    position: absolute; 
 
    top: 48px; 
 
    left: 0; 
 
    width: 150px; 
 
    -webkit-box-shadow: none; 
 
    -moz-box-shadow: none; 
 
    box-shadow: none; 
 
    display: none; 
 
    opacity: 0; 
 
    visibility: hidden; 
 
    -webkit-transiton: opacity 0.2s; 
 
    -moz-transition: opacity 0.2s; 
 
    -ms-transition: opacity 0.2s; 
 
    -o-transition: opacity 0.2s; 
 
    -transition: opacity 0.2s; 
 
} 
 
ul li ul li { 
 
    background: #555; 
 
    display: block; 
 
    color: #fff; 
 
    text-shadow: 0 -1px 0 #000; 
 
} 
 
ul li ul li:hover { 
 
    background: #666; 
 
} 
 
ul li:hover ul { 
 
    display: block; 
 
    opacity: 1; 
 
    visibility: visible; 
 
} 
 
.bottom-separator { 
 
    border-bottom: solid 1px white; 
 
    -webkit-transiton: opacity 0.2s; 
 
}

<div> 
 
    <ul> 
 
    <li>Home</li> 
 
    <li>About</li> 
 
    <li> 
 
     Portfolio 
 
     <ul> 
 
     <li class="bottom-separator">Web Design</li> 
 
     <li class="bottom-separator">Web Development</li> 
 
     <li class="bottom-separator">Illustrations</li> 
 
     </ul> 
 
    </li> 
 
    <li>Blog</li> 
 
    <li>Contact</li> 
 
    </ul> 
 
</div>

Answer 4

在你的風格加上執行CSS

div > ul > li:nth-child(even){ 
    background: black; 
    width: 1px; 
    margin: 0; 
    padding: 0; 
    height: 35px; 
    top: 15px; 
    z-index: 3; 
} 

div > ul > li:nth-child(odd) { 
    margin-left: -5px; 
} 

然後更新HTML：

<div> 
<ul> 
    <li>Home</li> 
    <li></li> 
    <li>About</li> 
    <li></li> 
    <li>Portfolio</li> 
    <li></li> 
    <ul> 
     <li class="bottom-separator">Web Design</li> 
     <li class="bottom-separator">Web Development</li> 
     <li class="bottom-separator">Illustrations</li> 
    </ul> 
    <li></li> 
    <li>Blog</li> 
    <li></li> 
    <li>Contact</li> 
    </ul> 
</div>