Я экспериментирую здесь с псевдоклассами и пытаюсь что-то сделать, что обычно делаю с классом стиля. У меня есть неупорядоченный список с несколькими неупорядоченными подчиненными списками и т. Д.
Я хочу убедиться, что первый уровень тегов li установлен влево.
Вот мой HTML
<body>
<div id="MainMenu">
<ul id="nav">
<li><a href="#">Home</a></li>
<li>
<a href="#">About</a>
<ul>
<li><a href="#">The Product</a></li>
<li><a href="#">Meet The Team</a></li>
</ul>
</li>
<li>
<a href="#">Contact</a>
<ul>
<li>
<a href="#">Business Hours</a>
<ul>
<li><a href="#">Week Days</a></li>
<li><a href="#">Weekends</a></li>
</ul>
</li>
<li><a href="#">Directions</a></li>
</ul>
</li>
</ul>
</div>
</body>
Я попробовал такой стиль.
body {
font: 13px/160% Trebuchet MS,Arial,Helvetica,Sans-Serif;
margin:0;
padding:0
}
#nav{
list-style:none;
font-weight:bold;
width:100%;
}
#nav li{
float:left;
margin-right:40px;
position:relative;
}
Проблема с этим заключается в том, что все ли потомки id nav имеют плавающий левый угол. Теперь я хочу, чтобы теги li первого уровня плавали влево, а все остальные теги уровня li игнорировались. Пожалуйста, не отвечайте, говоря, используйте имя класса для всех тегов li верхнего уровня. Я уже знаю, что могу подойти к этому так. Я хочу узнать некоторые из псевдоклассов и узнать, как они могут помочь мне в этом подходе.
Например, мне нужно что-то вроде #nav li: first-child {....} Но это только даст мне первый li в верхнем списке ul. Я хочу, чтобы все дети верхнего уровня в списке ul и игнорировали теги li второго уровня и так далее. Есть ли псевдоклассы, которые могут этого достичь.
Спасибо