Hi, I not used the forum for some time. Now I again start with some html and css, I notice I forgot a lot.
I have a navigation bar, but want to include a dropdown menu. Say I want to include a dropdown in the way item 1a, item 1b, etc.
Will be thankful for any of your help.
Coding I have:
<div id="topnavigation">
<a class="topmenu" href="" title="">home</a>
<a class="topmenu" href="" title="">item 1</a>
<a class="topmenu" href="" title="">item 2</a>
<a class="topmenu" href="" title="">item 3</a>
<a class="topmenu" href="" title="">item 4</a>
</div>
#topnavigation {
overflow:hidden;
height: 20px;
margin:0 -1px;/* no width needed*/
border-top:1px solid #e0d6a4;
border-bottom:1px solid #e0d6a4;
font-size:100%;
padding-top:5px;
text-align:center;
text-transform: uppercase;
}
a.topmenu {
color: #404040;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
text-decoration: none;
}
a.topmenu:active, a.topmenu:hover {
color: #333;
}
PaulOB
2
There’s a good article on css tricks that will take you through the process.
If that doesn’t make sense to you then we can step through it one step at a time 
Hello to carthago1,
here is some HTML what I wrote…
<input id="menu" type="checkbox" hidden>
<label for="menu">
<span>☰</span>
</label>
<ul id="topnavigation">
<li><a href="#">home</a></li>
<li><a href="#">item 1</a>
<ul>
<li><a href="#">item 1a</a>
<li><a href="#">item 1b</a>
</ul>
</li>
<li><a href="#">item 2</a>
<ul>
<li><a href="#">item 2a</a>
<li><a href="#">item 2b</a>
</ul>
</li>
<li><a href="#">item 3</a>
<ul>
<li><a href="#">item 3a</a>
<li><a href="#">item 3b</a>
</ul>
</li>
<li><a href="#">item 4</a>
<ul>
<li><a href="#">item 4a</a>
<li><a href="#">item 4b</a>
</ul>
</li>
</ul>
…and used this CSS to make it work…
body {
background-color: #fff;;
font: normal 1em / 1.5em sans-serif;
}
#menu + label {
display: none;
padding: 0.5em;
background-color: #000;
font-size: 2em;
color: #fff;
text-align: right;
cursor: pointer;
}
#menu + label span {
transition: 0.5s ease-in-out;
}
ul {
padding: 0;
margin: 0;
list-style: none;
}
#topnavigation {
display: flex;
flex-direction: row;
justify-content: center;
gap: 1em;
padding-top: 0.5em;
text-transform: uppercase;
}
#topnavigation > li {
position: relative;
}
#topnavigation > li ul {
position: absolute;
display: none;
white-space: nowrap;
}
#topnavigation a {
display: block;
font: bold 1em arial, helvetica, sans-serif;
color: #555;
text-decoration: none;
}
#topnavigation a:hover,
#topnavigation a:active {
color: #000;
}
#topnavigation > li:hover ul,
#topnavigation > li:active ul {
display: block;
}
@media ( max-width: 22em ){
#menu + label {
display: flex;
justify-content: right;
}
#topnavigation {
flex-direction: column;
gap: 0.5em;
padding-top: 0;
display: none;
}
#topnavigation > li ul {
position: static;
}
#menu:checked+label span {
transform: rotateZ( 90deg );
}
#menu:checked~#topnavigation {
display: block;
}
#topnavigation a {
padding: 1em;
border-bottom: 2px solid #000;
background-image: linear-gradient(to bottom, #fff, #ccc);
}
#topnavigation a:hover,
#topnavigation a:active {
background-image: linear-gradient(to bottom, #ddd, #aaa);
}
}
Thanks for the reply PaulOB and reallybaldoldman,
I will start reading
system
Closed
6
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.