Hello, I am seeking assistance to transform the top dropdown menu layout into a vertical one similar to the menu on the left side. Any help would be greatly appreciated as I am running out of ideas!
Thank you in advance!
@charset "utf-8";
/* CSS Document */
/*Index*/
#index {
background-image: url(../img/metallica/Metallica_London_2008-09-15_Kirk_and_JamesBL.jpg);
background-repeat: no-repeat;
background-position: center 10;
background-attachment: fixed;
}
#venstre {
float: left;
}
#midt {
float: left;
}
#header {
position: fixed;
top: 0;
left: 0;
height: auto;
}
#header a {
list-style-type: none;
text-decoration: none;
color: #FFFFFF;
font-family: 'Cinzel', serif, 'Cinzel Decorative', cursive;
font-size: 60px;
float: left;
margin-top: 32px;
margin-left: 40px;
margin-right: 650px;
position: relative;
}
#header form {
float: right;
margin-top: 26px;
margin-right: 49px;
}
#righto {
float: right;
}
#lefto {
float: left;
}
...
<body id="index">
<div id="header">
<div id="lefto"><a href="index.html">Rock Fans</a>
</div>
<div id="righto">
<form>
<label>
<img src="../img/search.png">
</label>
<input type="search" name="search" placeholder="Search"></input>
</form>
</div>
</div>
...
<a name="4"></a>
</div>
</div>
<div id="right">
<img src="../img/elvis/<?php echo $row['Img'];?>">
<?php echo $row[ 'Name'];?>
<?php echo $row[ 'Txt'];?>
<?php echo $row[ 'video'];?>
</div>
<div class="footer">Designed and executed by <a href="https://www.facebook.com/LikeAMusicBox">Christina L. Pedersen</a>
</div>
</body>
To view my fiddle example click here: http://jsfiddle.net/65pLy4sm/