adrian/jean-cloud_website
1
0
Fork 0
Code Issues 1 Pull Requests 1 Releases Wiki Activity

overflow dropdown

Browse Source
This commit is contained in:
Elisa 2019-08-14 00:24:14 +02:00
parent 468548a8ec
commit 63ae7d5b64
2 changed files with 42 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
css/main.css
View File

@ -19,20 +19,24 @@ body {
#nav { #nav {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
text-align: center; }
padding: 1.5em 0 31.5em 0;
z-index: 1; #nav #content {
overflow: hidden; width: 100%;
text-align: center;
padding: 1.5em 0 31.5em 0;
z-index: 1;
overflow-x: hidden;
} }
ul, li { ul, li {
list-style: none; list-style: none;
} }
#nav > ul { #nav #content > ul {
line-height: 0px; line-height: 0px;
position: relative; position: relative;
display: inline-block; display: inline-block;
@ -43,7 +47,7 @@ ul, li {
padding: 0 0.5em; padding: 0 0.5em;
} }
#nav > ul > li { #nav #content > ul > li {
display: inline-block; display: inline-block;
margin: -9px 0.5em 0 0.5em; margin: -9px 0.5em 0 0.5em;
border-radius: 0.5em; border-radius: 0.5em;
@ -52,17 +56,17 @@ ul, li {
position: relative; position: relative;
} }
#nav > ul::before { #nav #content > ul::before {
left: 100%; left: 100%;
margin-left: 1px; margin-left: 1px;
} }
#nav > ul::after { #nav #content > ul::after {
right: 100%; right: 100%;
margin-right: 1px; margin-right: 1px;
} }
#nav > ul::before, #nav > ul::after { #nav #content > ul::before, #nav #content > ul::after {
content: ''; content: '';
display: block; display: block;
width: 300%; width: 300%;

50
index.html
View File

@ -29,30 +29,32 @@
<!-- Nav --> <!-- Nav -->
<!-- Todo – drop down list in css --> <!-- Todo – drop down list in css -->
<nav id="nav"> <nav id="nav">
<ul> <div id="content">
<li><a href="index.html">Home</a></li> <ul>
<li> <li><a href="index.html">Home</a></li>
<a href="#">Dropdown</a> <li>
<ul class="dropdown"> <a href="#">Dropdown</a>
<li><a href="#">Lorem ipsum dolor</a></li> <ul class="dropdown">
<li><a href="#">Magna phasellus</a></li> <li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Etiam dolore nisl</a></li> <li><a href="#">Magna phasellus</a></li>
<li> <li><a href="#">Etiam dolore nisl</a></li>
<a href="#">And a submenu &hellip;</a> <li>
<ul class="submenu"> <a href="#">And a submenu &hellip;</a>
<li><a href="#">Lorem ipsum dolor</a></li> <ul class="submenu">
<li><a href="#">Phasellus consequat</a></li> <li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Magna phasellus</a></li> <li><a href="#">Phasellus consequat</a></li>
<li><a href="#">Etiam dolore nisl</a></li> <li><a href="#">Magna phasellus</a></li>
</ul> <li><a href="#">Etiam dolore nisl</a></li>
</li> </ul>
<li><a href="#">Veroeros feugiat</a></li> </li>
</ul> <li><a href="#">Veroeros feugiat</a></li>
</li> </ul>
<li><a href="left-sidebar.html">Left Sidebar</a></li> </li>
<li><a href="right-sidebar.html">Right Sidebar</a></li> <li><a href="left-sidebar.html">Left Sidebar</a></li>
<li><a href="no-sidebar.html">No Sidebar</a></li> <li><a href="right-sidebar.html">Right Sidebar</a></li>
</ul> <li><a href="no-sidebar.html">No Sidebar</a></li>
</ul>
</div>
</nav> </nav>
</div> </div>