我所有的菜单项都有 150 像素的宽度,但我想减小其中一些的宽度(即新闻和媒体)。正在考虑这样的事情:
#menu.smallerwidth ul li {
width: 100px;
}
但不确定这是否是正确的方法以及如何在 ly html 代码中反映它。非常感谢您的帮助
HTML
<div id="menu">
<ul>
<li>
<h5>ESPACE dgddsgd</h5>
<ul>
<li><a title="" href="">+ Cabinet dgds</a> </li>
<li><a title="" href="">+ Ateliers dgd</a> </li>
</ul>
<li>
<h5>ESPACE dsgs</h5>
<ul>
<li><a title="" href="">+ dgds dsgs</a> </li>
<li><a title="" href="">+ hffh de dfh</a> </li>
<li><a title="" href="">+ d d'fdhfdfhfdh</a> </li>
</ul>
</li>
<li>
<h5>NEWS & MEDIA</h5>
<ul>
<li><a title="" href="">+ hghgfh</a> </li>
<li><a title="" href="">+ ghgfhfgg</a> </li>
<li><a title="" href="">+ ghgfhgf</a> </li>
</ul>
</li>
<li>
<h5>LE hgfg</h5>
<ul>
<li><a title="" href="">+ L'hghgf</a> </li>
<li><a title="" href="">+ ghgf</a> </li>
</ul>
</li>
</ul>
</div>
CSS
#menu {
float: right;
overflow: hidden;
margin-top: 31px;
margin-right: 20px;
padding-bottom: 10px;
}
#menu ul {
float: right;
margin: 0;
color: #000;
list-style: none;
}
#menu ul li {
display: inline-block;
float: left;
width: 150px;
line-height: 20px;
}
#menu.smallerwidth ul li {
width: 100px;
}
#menu>ul>li {
margin-left: 20px;
}
#menu ul li a { /* This is the sub-menu items */
display: block;
text-decoration: none;
font-weight: 400;
font-size: 12px;
padding-left: 10px;
}
#menu ul li a, #menu ul ul:hover li a {
color: #333;
-webkit-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
-moz-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
-ms-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
-o-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
transition-timing-function: ease-out, ease-in, linear, ease-in-out;
-webkit-transition-duration: .4s, .4s, .4s, .4s;
-moz-transition-duration: .4s, .4s, .4s, .4s;
-ms-transition-duration: .4s, .4s, .4s, .4s;
-o-transition-duration: .4s, .4s, .4s, .4s;
transition-duration: .4s, .4s, .4s, .4s;
-webkit-transition-property: all, -webkit-transform;
-moz-transition-property: all, -moz-transform;
-ms-transition-property: all, -ms-transform;
-o-transition-property: all, -o-transform;
transition-property: all, transform;
}
#menu ul ul li a:hover, #menu ul ul li.current-menu-item a {
color: #005EBC;
-webkit-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
-moz-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
-ms-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
-o-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
transition-timing-function: ease-out, ease-in, linear, ease-in-out;
-webkit-transition-duration: .4s, .4s, .4s, .4s;
-moz-transition-duration: .4s, .4s, .4s, .4s;
-ms-transition-duration: .4s, .4s, .4s, .4s;
-o-transition-duration: .4s, .4s, .4s, .4s;
transition-duration: .4s, .4s, .4s, .4s;
-webkit-transition-property: all, -webkit-transform;
-moz-transition-property: all, -moz-transform;
-ms-transition-property: all, -ms-transform;
-o-transition-property: all, -o-transform;
transition-property: all, transform;
}
h5 {
margin-bottom: 3px;
color: #FFF;
font-weight: 600;
font-size: 11px; /* This is the top menu items */
background: #0064C4;
padding-left: 10px;
}