How to display a hidden element when the page is opened?

I have a series of div elements which I can move around, with only one section visible at a time. This is a simplified example, and that part of it is fine.

My problem is that without a starting link, the main menu is hidden when the page is opened. I don't want that opening link.

What can I do instead of the first link, so that main menu is immediately visible?

.hid {
  display: none;
}

.hid:target {
  display: block;
}

<a href='#main'>Start</a>

<div class='hid' id='main'>
  <h3>This is main menu</h3>
  <p><a href='#menuA'>Goto menu A</a>
    <p><a href='#menuB'>Goto menu B</a>
</div>

<div class='hid' id='menuA'>
  <h3>This is menu A</h3>
  <p><a href='#main'>Goto main menu</a>
    <p><a href='#menuB'>Goto menu B</a>
</div>

<div class='hid' id='menuB'>
  <h3>This is menu B</h3>
  <p><a href='#main'>Goto main menu</a>
    <p><a href='#menuA'>Goto menu A</a>
</div>

I want to use only CSS.

Solution

Make the main menu the last one. use display:block on it then hide it again when one of the other is targeted

.hid {
  display: none;
}

.hid:target,
#main {
  display: block;
}

.hid:target ~ #main {
  display:none;
}

<div class='hid' id='menuA'>
  <h3>This is menu A</h3>
  <p><a href='#main'>Goto main menu</a>
    <p><a href='#menuB'>Goto menu B</a>
</div>

<div class='hid' id='menuB'>
  <h3>This is menu B</h3>
  <p><a href='#main'>Goto main menu</a>
    <p><a href='#menuA'>Goto menu A</a>
</div>

<div class='hid' id='main'>
  <h3>This is main menu</h3>
  <p><a href='#menuA'>Goto menu A</a>
    <p><a href='#menuB'>Goto menu B</a>
</div>