I am newbie with css and trying to make a very simple page as design.

Here is a page I want to make

As you can see in this picture, all the blocks at the left : More, Merchandise, Extras, Media are very neat. The bottom row are very straight.

But here is mine.

As you can see, the blocks at the left : More, Merchandise, Extras, Media are not as the design.

Here is my code at styles.css:

#nav .subnav {
position: absolute;
}

and here is my code at index.html

<li>
   <a href="">More</a>
   <ul class="subnav">
           <li><a href="">Merchandise</a></li>
           <li><a href="">Extras</a></li>
           <li><a href="">Media</a></li>
    </ul>
 </li>

Could you please give me some ideas for this problem ? Thank you very much for your time.

CodePudding user response：

Take this code and edit it to fit your purpose:

var d = {
  e: function(id){
    return(document.getElementById(id));
  }
};
var System = {
    tabs: {
        init: function(){
            try{
                var tabs = d.e("tabs").querySelectorAll("tab");
                for(var i = 0; i < tabs.length; i  ){
                    var e = tabs[i];
                    e.onclick = function(){
                        System.tabs.activate(this);
                    };
                }
                System.tabs.activate(tabs[0]);
            }catch(err){
                alert(err.stack);
            }
        },
        activate: function(name){
            try{
                var tabs = d.e("tabs").querySelectorAll("tab");
                for(var i = 0; i < tabs.length; i  ){
                    tabs[i].setAttribute("active","false");
                }
                name.setAttribute("active","true");
                var contents = d.e("content").querySelectorAll("pane");
                for(var i = 0; i < contents.length; i  ){
                    contents[i].style.display = "none";
                }
                contents[Array.from(tabs).indexOf(name)].style.display = "block";
            }catch(err){
                alert(err.stack);
            }
        }
    },
    goto: function(url){
      window.location.replace(url);
    }
};
window.onload = function(){
  System.tabs.init();
}

tab{
  display: inline-block;
  background: #777777;
  border: 1px solid #000000;
  padding: 4px;
}
tab:hover{
  background: #aaaaaa
}
#tabs{
  text-align: center;
}
tab[active="true"]{
  background: #77aa77;
}

<div id="tabs">
    <tab>Tab name</tab><tab>Another tab name</tab><tab>And another tab name</tab>
</div>
<div id="content">
    <pane>
        <!-- Content here -->
    </pane>
    <pane>
        <!-- Another bit of content here -->
    </pane>
    <pane>
        <!-- And another bit of content here -->
    </pane>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

I have added System.goto(url) so you can have a shortcut to change the URL.

CodePudding user response：

If you simply want your .subnav positioned right below its main nav item <li> and have them displayed aligned left side, use absolute CSS positioning for the subnav:

CSS

ul {
  padding-left: 0;
}

li {
  position: relative;
}

.subnav {
  position: absolute;
  top: 0;
}

.subnav li {
  display: inline-block;
}